<template>
	<div class="cfff head ">
		<div class="w1450 center ">
			<img src="@/assets/head/logo.png" class="log-icon" alt="" />
			<img src="@/assets/head/title.png" class="title-icon mt10" alt="" />
			<div class="flex1"></div>
			<div class="user-box center">
				<img src="@/assets/head/avatar.png" class="avatar bor50 mr5" alt="" />
				<div class="flex1">
					<div class="center">
						<div class="f14 flex1 nowrap">爱新觉罗</div>
						<el-icon size="16" color="#fff">
							<CaretBottom />
						</el-icon>
					</div>
					<div class="new-box center f12 mt5">未读消息（0）</div>
				</div>
			</div>
		</div>
		<div class=" nav-box center">
			<div class="w1450 center f16">
				<div class="nav center" :class="nav===0?'active':''">重要通知</div>
				<div class="nav center" :class="nav==1?'active':''">行业会议</div>
				<div class="nav center" :class="nav==2?'active':''">交流活动</div>
				<div class="nav center" :class="nav==3?'active':''">学习培训</div>
				<div class=" flex1"></div>
				<div class="ipnut-box center">
					<input type="text" class="f16 flex1" placeholder="输入课程或活动名称 " />
					<div class="center searc-btn center pointer">
						<img src="@/assets/head/search.png" class="search-icon" alt="" />
						<div class="f16">搜索</div>
					</div>
				</div>
				<div class="add-box ml10 bfff center pointer">
					<img src="@/assets/head/add.png" class="add-icon" alt="" />
					<div class="f14 c333">新增需求</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				nav: ''
			}
		},
		created() {
			this.nav = this.$route.meta.nav
		}
	}
</script>
<style lang='scss' scoped>
	.head {
		background: url(/src/assets/head/back.png) no-repeat center top;
		width: 100%;
		height: 280px;
		background-size: cover;
		padding-top: 28px;

		.nav-box {
			height: 50px;
			background: rgba(21, 80, 169, 0.5);
			backdrop-filter: blur(11px);
			margin-top: -50px;

			.add-box {
				width: 120px;
				height: 30px;
				border-radius: 4px;

				.add-icon {
					width: 12px;
					height: 14px;
					margin-right: 7px;
				}
			}

			.searc-btn {
				width: 100px;
				height: 30px;
				background: #007BFF;
				border-radius: 0px 4px 4px 0px;
				border: 1px solid #FFFFFF;
				backdrop-filter: blur(10px);
				border-right: 0;

				.search-icon {
					width: 17px;
					height: 17px;
					margin-right: 4px;
				}
			}

			.ipnut-box {
				width: 500px;
				height: 30px;
				background: rgba(255, 255, 255, 0.5);
				border-radius: 4px;
				border: 1px solid #FFFFFF;
				backdrop-filter: blur(10px);

				input {
					padding: 0 17px;
				}
			}

			.nav {
				width: 90px;
				height: 30px;
				border-radius: 4px;
				margin-right: 36px;
				cursor: pointer;

				&:hover {
					background: #FF8E00;
				}

				&.active {
					background: #FF8E00;
				}
			}
		}

		.new-box {
			width: 100px;
			height: 22px;
			background: #007BFF;
			border-radius: 12px;
		}

		.avatar {
			width: 48px;
			height: 48px;
			border: 1px solid #FFFFFF;
			object-fit: cover;
		}

		.user-box {
			width: 180px;
			height: 60px;
			background: rgba(0, 0, 0, 0.2);
			border-radius: 40px;
			backdrop-filter: blur(10px);
			padding: 6px 20px 6px 6px;
		}

		.title-icon {
			width: 219px;
			height: auto;
		}

		.log-icon {
			width: 265px;
			height: 252px;
			margin-right: 50px;
		}
	}
</style>